<template>
  <n-thing
    class="follow"
    @mouseover="displayDate = true"
    @mouseleave="displayDate = false">
    {{ message.content }}
    <span class="message-time" v-show="displayDate">
      {{ messageTime }}
    </span>
  </n-thing>
</template>

<script setup lang="ts">
import { ChatMessage } from "@/api";
import { computed, ref } from "vue";
import { formatTime } from "@/utils";

var props = defineProps<{ message: ChatMessage }>();

const messageTime = computed(() =>
  formatTime(props.message.createTime, "hh:mm:ss")
);

const displayDate = ref(false);
</script>
<style scoped>
.follow {
  /*圆边*/
  padding: 5px 20px 5px 94px;
}

.message-time {
  margin: 0 0 0 5px;
  font-size: 13px;
  color: #c0c0c0;
  font-weight: normal;
  /*定位*/
  position: absolute;
  top: 6px;
  left: 18px;
}
</style>
